<template>
  <n-config-provider
      :locale="getLang"
      :date-locale="dateZhCN"
      :theme="getDarkTheme"
      :theme-overrides="appStore.theme == 'dark' ? darkThemeOverrides : getThemeOverrides"
      :class="appStore.theme" :hljs="hljs">
    <AppProvider>
      <RouterView/>
    </AppProvider>
    <n-global-style/>
  </n-config-provider>
</template>
<script setup lang="ts">
import AppProvider from '@components/AppProvider';
import {computed} from 'vue'
import {zhCN, dateZhCN, darkTheme} from 'naive-ui';
import {UseAppStore} from '@/stores/app.ts';
import {lighten} from '@/util';
import {ThemesColor} from '@/config';
import hljs from 'highlight.js/lib/core';

const appStore = UseAppStore();
//语言
const getLang = computed(() => zhCN);
const getDarkTheme: any | unknown = computed(() =>
    appStore.theme == "dark" ? darkTheme : undefined
);
const menuOption = {
  fontSize: "15px",
  fontWeight: "600",

}
const getThemeOverrides = computed(() => {
  const appTheme = ThemesColor.appTheme;
  const lightenStr = lighten(ThemesColor.appTheme, 6);
  return {
    common: {
      "primaryColor": appTheme,
      "primaryColorHover": lightenStr,
      "primaryColorPressed": lightenStr,
      "primaryColorSuppl": appTheme,
      "successColor": "#18a058",
      "successColorHover": "#36ad6a",
      "successColorPressed": "#0c7a43",
      "successColorSuppl": "#36ad6a",
      // "infoColor": "#909399",
      // "infoColorHover": "#b1b3b8",
      // "infoColorPressed": "#73767a",
      // "infoColorSuppl": "#b1b3b8",
      "heightMini": "14px",
      "heightTiny": "20px",
      "heightSmall": "26px",
      "heightMedium": "32px",
      "heightLarge": "38px",
      "heightHuge": "44px",
    },
    Menu:menuOption
  };
});
const darkThemeOverrides = computed(() => {
  const appTheme = ThemesColor.appTheme;
  const lightenStr = lighten(appTheme, 6);
  return {
    common: {
      "primaryColor": appTheme,
      "primaryColorHover": lightenStr,
      "primaryColorPressed": lightenStr,
      "primaryColorSuppl": appTheme,
      "successColor": "#18a058",
      "successColorHover": "#36ad6a",
      "successColorPressed": "#0c7a43",
      "successColorSuppl": "#36ad6a",
      "heightMini": "14px",
      "heightTiny": "20px",
      "heightSmall": "26px",
      "heightMedium": "32px",
      "heightLarge": "38px",
      "heightHuge": "44px",
    },
    Menu: menuOption
  };
});

</script>
<style lang="scss">
.upload_btn{
  border-radius: 0 var(--n-border-radius) var(--n-border-radius) 0;
}
.select-img {
  position: relative;
  border-radius: var(--n-border-radius);
  cursor: pointer;

  &-img-clear {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -7px;
    z-index: 10;
    right: -7px;
    background-color: rgba(0, 0, 0, .3);
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: none;
  }

  &-img {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }
}

.select-img:hover {
  .select-img-img-clear {
    display: block;
  }
}
</style>
